<template>
  <div v-loading="isBusy" element-loading-text="加载中...">
    <!--搜索栏-->
    <div class="list-searchbar">
      <el-space direction="horizontal" :size="30">
        <el-space :size="0">
          <span>关键字：</span>
          <el-input
            clearable
            style="width: 200px"
            placeholder="用户名/真实姓名"
            v-model="keyword"
          />
        </el-space>

        <el-space :size="0">
          <el-button type="primary" @click="search()">
            <el-icon class="el-icon--left">
              <Search />
            </el-icon>
            查询
          </el-button>
        </el-space>
      </el-space>
    </div>

    <!--操作栏-->
    <div class="list-toolbar">
      <el-button type="primary" @click="addClick()">
        <el-icon class="el-icon--left">
          <Plus />
        </el-icon>
        新增
      </el-button>
    </div>

    <!-- 列表 -->
    <el-table
      border
      stripe
      width="100%"
      max-height="calc(100vh - 350px)"
      header-cell-class-name="tableHeaderRow"
      :data="tableDatas"
    >
      <el-table-column header-align="center" prop="number" label="用户名" width="300" />
      <el-table-column header-align="center" prop="name" label="真实姓名" width="300" />
      <el-table-column
        header-align="center"
        align="center"
        prop="enabled"
        label="状态"
        width="100"
      />
      <el-table-column
        header-align="center"
        align="center"
        prop="addedTime"
        label="创建时间"
        width="290"
      />
      <el-table-column header-align="center" fixed="right" label="操作" align="center" width="660">
        <template #default="scope">
          <el-button type="primary" size="small" @click="resetpasswordClick(scope)">
            <el-icon class="el-icon--left">
              <Edit />
            </el-icon>
            重置密码
          </el-button>
          <el-button type="primary" size="small" @click="relateRolesClick(scope)">
            <el-icon class="el-icon--left">
              <Edit />
            </el-icon>
            分配角色
          </el-button>
          <el-button type="primary" size="small" @click="enableUserClick(scope)">
            <el-icon class="el-icon--left">
              <Edit />
            </el-icon>
            启用
          </el-button>
          <el-button type="danger" size="small" @click="disableUserClick(scope)">
            <el-icon class="el-icon--left">
              <Edit />
            </el-icon>
            停用
          </el-button>
          <el-button type="danger" size="small" @click="removeUserClick(scope)">
            <el-icon class="el-icon--left">
              <Delete />
            </el-icon>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      style="margin-top: 10px; justify-content: right"
      layout="total, sizes, prev, pager, next, jumper"
      :background="true"
      :page-sizes="[20, 40, 80, 100]"
      :total="pageCount"
      v-model:page-size="pageSize"
      v-model:current-page="pageIndex"
      @size-change="loadData"
      @current-change="loadData"
    />

    <!-- 创建用户页 -->
    <AddView v-model:visible="addViewVisible" @closed="editClosed" />

    <!-- 分配角色页 -->
    <RelateRoleView v-model:visible="relateRoleViewVisible" @closed="editClosed" />

    <!-- 重置密码页 -->
    <ResetPasswordView
      v-model:visible="resetPasswordViewVisible"
      v-model:user="selectedUser"
      @closed="editClosed"
    />
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
import AddView from '@/views/user/AddView.vue'
import RelateRoleView from '@/views/user/RelateRoleView.vue'
import ResetPasswordView from '@/views/user/ResetPasswordView.vue'
import type { ComponentInternalInstance } from '@vue/runtime-core'
import type { PageModel } from '@/common/model/app/page_model'
import type { UserInfo } from '@/common/model/app_server/outputs/user_info'

defineOptions({
  name: 'UserIndexView',
})

//region # 属性

// 应用实例
const { proxy }: ComponentInternalInstance | null = getCurrentInstance()

// 是否繁忙
const isBusy = ref(false)

// 添加用户窗口显示状态
const addViewVisible = ref(false)

// 重置密码窗口显示状态
const resetPasswordViewVisible = ref(false)

// 分配角色窗口显示状态
const relateRoleViewVisible = ref(false)

// 表格数据列表
const tableDatas = ref<Array<any>>()

// 每页条目
const pageSize = ref(20)

// 当前页码
const pageIndex = ref(1)

// 分页总数
const pageCount = ref(0)

// 关键字
const keyword = ref('')

//选中行
const selectedUser = ref<UserInfo>()

//endregion

//region # 方法

// Action

/**
 * 新增点击
 * */
const addClick = function () {
  addViewVisible.value = true
}

/**
 * 重置密码
 * */
const resetpasswordClick = function (row: any) {
  const userInfo: UserInfo = row.row
  selectedUser.value = userInfo
  resetPasswordViewVisible.value = true
}

/**
 * 分配角色
 * */
const relateRolesClick = function (row: any) {
  const userInfo: UserInfo = row.row
  selectedUser.value = userInfo
  console.log('1', selectedUser.value)
  relateRoleViewVisible.value = true
}

/**
 * 启动
 * */
const enableUserClick = async function (row: any) {
  const userInfo: UserInfo = row.row
  ElMessageBox.confirm('是否要启用用户！', '提示', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning',
  }).then(async () => {
    await proxy.$api.user.enableUser(userInfo.number)
    loadData()
    proxy.$service.toast.success('启用用户成功！')
  })
}

/**
 * 停止
 * */
const disableUserClick = async function (row: any) {
  const userInfo: UserInfo = row.row
  ElMessageBox.confirm('是否要停用用户！', '提示', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning',
  }).then(async () => {
    await proxy.$api.user.disableUser(userInfo.number)
    loadData()
    proxy.$service.toast.success('停用用户成功！')
  })
}

/**
 * 删除
 * */
const removeUserClick = async function (row: any) {
  const userInfo: UserInfo = row.row
  ElMessageBox.confirm('是否要删除用户！', '提示', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning',
  }).then(async () => {
    await proxy.$api.user.removeUser(userInfo.number)
    loadData()
    proxy.$service.toast.success('删除用户成功！')
  })
}

/**
 * 编辑关闭
 * @param result - 结果
 * */
const editClosed = (result: boolean) => {
  if (result) {
    loadData()
  }
}

/**
 * 加载数据
 * */
const loadData = async () => {
  isBusy.value = true
  const users: PageModel<UserInfo> = await proxy.$api.user.getUsersByPage(
    keyword.value,
    null,
    pageIndex.value,
    pageSize.value,
  )
  pageSize.value = users.pageSize
  pageIndex.value = users.pageIndex
  pageCount.value = users.rowCount
  tableDatas.value = new Array<UserInfo>()
  for (let i = 0; i < users.datas.length; i++) {
    tableDatas.value.push({
      id: users.datas[i].id,
      number: users.datas[i].number,
      name: users.datas[i].name,
      enabled: proxy.$enumFilters.enabledFilter(users.datas[i].enabled),
      addedTime: users.datas[i].addedTime,
    })
  }
  setTimeout(() => {
    isBusy.value = false
  }, 200)
}

/**
 * 查询
 * */
const search = () => {
  loadData()
}

// Private

//endregion

//region # 事件

/**
 * 加载完毕
 * */
onMounted(async () => {
  loadData()
})
//endregion
</script>

<style scoped>
@import 'IndexView.less';
</style>
